<template>
  <div style="padding:140px">
    <el-row>
      <el-col :span="24" align="right" class="searchPalce">
        <el-button style="float:left" @click="print('table')"><i style="margin-right:5px" class="el-icon-printer"></i>打印</el-button>
        <el-input v-model="filter.name" style="width:250px" placeholder="请输入学生姓名" clearable></el-input>
        <el-input v-model="filter.stuId" style="width:250px" placeholder="请输入学号" clearable>
           <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <el-button icon="el-icon-refresh" @click="flush">刷新</el-button>
      </el-col>
      <el-col :span="24" class="table-shadow">
        <table-template id="table"  :list="List" :item="item" :names="names" @edit="edit" @delete="Delete" @info="info"></table-template>
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          class="pagination">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="visible">
      <table-info :item="detail" :names="detailName"></table-info>
    </el-dialog>
  </div>
</template>

<script>
import tableTemplate from "@/components/tableTemplate";
import tableInfo from "@/components/InfoTemplate";
import {printer} from '@/utils'
import * as api from "@/api/student";

export default {
  components: {
    tableTemplate,
    tableInfo
  },
  data() {
    return {
      visible: false,
      title:'',
      filter: {
        name: null,
        stuId: null,
        page: 0,
        size: 12
      },
      total: 0,
      List: [],
      item: {
        studentid: "",
        name: "",
        sex: true,
        birthdate: 1,
        address: "",
        accessdate: 1,
        specialtytype: ""
      },
      names: ["学号", "姓名", "性别", "出生日期", "家庭住址", "入学时间", "专业"],
      detail: {
        id: "",
        studentid: "",
        password: "",
        name: "",
        sex: true,
        idcard: "",
        nation: "",
        birthdate: "",
        address: "",
        accessdate: "",
        specialtytype: ""
      },
      detailName: [
        "编号",
        "学号",
        "姓名",
        "性别",
        "民族",
        "身份证",
        "家庭住址",
        "出生日期",
        "入学时间",
        "专业"
      ]
    };
  },
  methods: {
    edit(obj) {
      this.$router.push({ name: "editStudent", params: { id: obj.id } });
    },
    Delete(obj) {},
    info(obj) {
      this.detail = obj;
      this.title = obj.name+"个人资料";
      this.visible = !this.visible;
    },
    flush(){
      this.filter.name = this.filter.stuId = null
      this.search()
    },
    search() {
      api.studentList(this.filter).then(res => {
        this.List = res.data.list;
        this.total = res.data.total;
      });
    },
    print(table){
      printer(table)
    }
  },
  mounted() {
    this.search();
  }
};
</script>

<style>
.pagination {
  float: right;
  margin-right: -10px;
  margin-top: 10px;
  
}
.el-col {
  margin-bottom: 1px;
}
.searchPalce{
  background-color: white;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
}
.table-shadow{
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  background: white;
}
</style>
